<template>
  <div id="funTitle">
    <span></span>
    <div class="title">{{title}}</div>
    <div class="close" @click="funClose"></div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    type: String
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    funClose() {
      this.$parent.closeFun(this.type);
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
#funTitle {
  width: 100%;
  height: 100%;
  position: relative;
  span {
    position: absolute;
    width: 3px;
    height: 100%;
    background: rgba(93, 105, 189, 1);
    top: 0;
    left: 0;
  }
  .title {
    height: 30px;
    line-height: 30px;
    margin-left: 22px;
    font-size: 14px;
    font-weight: bold;
    color: rgba(0, 12, 23, 1);
  }
  .close {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: url("../assets/images/close.png") no-repeat center center;
    background-size: 50%;
    transition: all 0.5s;
    cursor: pointer;
    &:hover {
      transform: translateY(-50%) rotateZ(180deg);
    }
  }
}
</style>
